<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="c" width="800px" height="600px"></canvas>
<script>
    var c=document.getElementById("c");
    var ctx=c.getContext("2d");
    ctx.lineWidth=5;
    ctx.strokeStyle="red";
    ctx.arc(100,100,100,0,(1/3)*Math.PI,false);
    ctx.lineTo(100,100);
    //ctx.lineTo(200,100);
    ctx.arc(100,100,100,(1/3)*Math.PI,(2/3)*Math.PI,false);
    ctx.lineTo(100,100);
    ctx.arc(100,100,100,(2/3)*Math.PI,1*Math.PI,false);
    ctx.lineTo(100,100);
    ctx.arc(100,100,100,0,(4/3)*Math.PI,false);
    ctx.lineTo(100,100);
    ctx.arc(100,100,100,0,(5/3)*Math.PI,false);
    ctx.lineTo(100,100);
    ctx.arc(100,100,100,0,2*Math.PI,false);
    ctx.lineTo(100,100);
    ctx.stroke();
    //ctx.moveTo();


</script>
</body>
</html>